<template>
  <el-pagination
    style="margin-top:20px"
    background
    layout="sizes, prev, pager, next"
    :total="props.total"
    v-model:current-page="page.pageIndex"
    v-model:page-size="page.pageSize"
    :page-sizes="props.pageSizes"
    @current-change="changePage"
    @size-change="changeSize"
  />
</template>
<script lang="ts" setup>
import { reactive, defineEmits } from 'vue'
const emit = defineEmits<{
  onChange: [page: any]
}>()
const props = withDefaults(defineProps<{
  page: { pageIndex: number, pageSize: number }
  pageSizes?: number[]
  total?: number
}>(), {
  page: () => ({ pageIndex: 1, pageSize: 10 }),
  pageSizes: () => [10, 20, 30, 50, 100],
  total: 0
})
const page = reactive({
  pageIndex: props.page.pageIndex,
  pageSize: props.page.pageSize
})
const changePage = (index: number): void => {
  page.pageIndex = index
  emit('onChange', page)
}
const changeSize = (size: number): void => {
  page.pageSize = size
  emit('onChange', page)
}
</script>
<style lang="scss" scoped>

</style>
